<template>
  <div class="container">
    <h1 style="text-align: center">表格标记</h1>
    <el-table :data="tableData" style="width: 100%" class="table">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
    <el-button type="" @click="handleStatus">改状态</el-button>
  </div>
</template>
<script>   
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        status: '1',
        address: '上海市普陀区金沙江路 1518 弄',
        name: '王小虎'
      }, {
        date: '2016-05-04',
        status: '2',
        address: '上海市普陀区金沙江路 1517 弄',
        name: '王小虎'
      },
      {
        date: '2016-05-04',
        status: '1',
        address: '上海市普陀区金沙江路 1517 弄',
        name: '王小虎'
      },
      {
        date: '2016-05-01',
        status: '2',
        address: '上海市普陀区金沙江路 1519 弄',
        name: '王小虎'
      }, {
        date: '2016-05-03',
        status: '2',
        address: '上海市普陀区金沙江路 1516 弄',
        name: '王小虎'
      }, {
        date: '2016-05-04',
        status: '1',
        address: '上海市普陀区金沙江路 1517 弄',
        name: '王小虎'
      }, {
        date: '2016-05-04',
        status: '2',
        address: '上海市普陀区金沙江路 1517 弄',
        name: '王小虎'
      }]
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.getTableData()
    })
  },
  methods: {
    getTableData () {
      this.arr = []
      let table = document.querySelectorAll('.el-checkbox')
      // 获取坐标
      this.tableData.forEach((item, index) => {
        if (item.status == '1') {
          this.arr.push(
            {
              index: index + 1,
              x: table[index].getBoundingClientRect().x + 300,
              y: table[index].getBoundingClientRect().y + 40
            }
          )
        }
      })
      console.log('this.arr: ', this.arr);
      // 动态生成div
      let container = document.querySelector('.container')
      this.arr.forEach(item => {
        let div = document.createElement('div')
        div.innerHTML = '已审核'
        // div.className = `box${item.index}`
        div.classList.add('tag', `box${item.index}`)
        container.insertBefore(div, container.lastChild)
        document.querySelector(`.box${item.index}`).style.cssText = `width: 150px;height: 35px;border: 1px blue solid;text-align: center;line-height: 35px;display: block;position: absolute; top: ${item.y}px; left: ${item.x}px; color: red; transform: rotate(10deg); -webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);`
      })
    },
    handleStatus () {
      let index = parseInt(Math.random(0, 1) * this.tableData.length)
      this.tableData[index].status == '1' ? this.tableData[index].status = '0' : this.tableData[index].status = '1';
      this.deleteDiv()
      this.getTableData()
    },

    // 删除div
    deleteDiv () {
      this.arr.forEach(item => {
        document.querySelector(`.box${item.index}`).remove()
      })

    }
  }
}
</script>
<style scoped>
/* .tag {
  width: 150px;
  height: 30px;
  border: 1px blue solid;
  text-align: center;
  line-height: 30px;
  display: none;
  position: absolute;
  top: 200px;
  left: 542px;
  color: red;
  transform: rotate(10deg);
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
} */
</style>
